<template>
    <div id="kkk">
        <div id="box">
            <span id="one" @touchstart="back" class="fa fa-angle-left"></span>
            <span id="two">购物车</span>
            <span id="three" @touchstart="delate">删除</span>
        </div>
        <div id="page">

            <div v-for="(goods,k) in newlist" id="kl">
                <div id="class">
                    <input type="checkbox" @change="categoryCheck(k,$event)" :checked="isCategoryCheck(k)" class="top">
                    <label for="">{{k}}</label>
                </div>

                <div v-for="(g,i) in goods">

                    <div id="hh">
                        <input type="checkbox" v-model="g.check" @change="$forceUpdate()" id="bottom">
                        <div id="four">

                            <img :src="g.img[0]">
                        </div>

                        <div id="five">
                            <p id="name">{{g.name}}</p>
                        </div>
                        <div id="six">
                            <p id="price">{{g.price*g.num}}元</p>

                            <p id="num">
                                <button @click="numberDecrease(g)">-</button>
                                <span>{{g.num}}</span>
                                <button @click="numberadd(g)">+</button>

                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div id="zi">
            <span>自营商品25省(甘青蒙藏宁新除外)满
                <span id="yuan">99.00元</span>包邮</span>
        </div>
        <div id="total">
            <div id="ccc">
                <input type="checkbox" @change="checkAll" :checked="isCheckAll()">
            </div>
            <div id="ddd">
                <span id="tp">总金额：{{totalPrice}}元</span>
            </div>
            <div id="eee">
                结算({{this.num}})
            </div>
        </div>
        <img src="/static/2.png" id="home" @touchstart="home">
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import { Toast } from 'mint-ui';
export default {
    data: function() {
        return {
            box: [],
            num: 0
        }
    },
    methods: {
        delate: function() {



            for (var i = 0; i < this.box.length; i++) {
                if (this.box[i].check) {
                    // console.log(456)
                    var param = {
                        _id: this.box[i]._id
                    }
                    // console.log(param)
                    this.http.post("/api/users/delate", param)
                        .then(res => {
                            Toast({
                                message: '删除成功',
                                position: 'middle',
                                duration: 1000
                            });
                        })
                }
            }
            this.http.post("/api/users/cartlist")
                .then(res => {
                    console.log(res.data.data.cart)
                    this.box = res.data.data.cart
                    this.num = res.data.data.cart.length
                })


        },
        back: function() {
            history.back()
        },
        categoryCheck: function(k, e) {
            this.newlist[k].forEach(g => {
                g.check = e.target.checked;
            });
            this.$forceUpdate();
        },
        isCategoryCheck: function(k) {
            return this.newlist[k].every(e => {
                return e.check;
            });
        },
        checkAll: function(e) {
            this.box.forEach(g => {
                g.check = e.target.checked;
            });
            this.$forceUpdate();
        },
        isCheckAll: function() {
            return this.box.every(g => {
                return g.check;
            });
        },
        numberDecrease: function(g) {
            if (g.num > 1) {
                g.num--;
            }
            var param = {
                _id: g._id
            }
            this.http.post("/api/users/decrease", param)
                .then(res => {

                })
        },
        numberadd: function(g) {
            g.num++
            var param = {
                _id: g._id
            }
            this.http.post("/api/users/addnum", param)
                .then(res => {

                })
        },
        home: function() {
            location.hash = "/"
        },
    },
    computed: {
        newlist: function() {
            var goodclasses = {};
            this.box.forEach(e => {
                if (!goodclasses[e.bigclasses]) {
                    goodclasses[e.bigclasses] = [];
                }
                goodclasses[e.bigclasses].push(e);
            });
            return goodclasses;

        },
        totalPrice: function() {
            return this.box.map(g => {
                if (!g.check) {
                    return 0;
                }
                return g.price * g.num;
            }).reduce((pre, price) => {
                return pre + price;

            }, 0);
        },
    },
    activated: function() {
        this.http.post("/api/users/cartlist")
            .then(res => {
                console.log(res.data.data.cart)
                this.box = res.data.data.cart
                this.num = res.data.data.cart.length
            })
    },
    mounted: function() {
        // console.dir(this.newlist)
        this.http.post("/api/users/cartlist")
            .then(res => {
                console.log(res.data.data.cart)
                this.box = res.data.data.cart
                this.num = res.data.data.cart.length
            })
    }
}
</script>

<style scoped>
#home {
    cursor: pointer;
    position: fixed;
    bottom: 12vh;
    left: 4vw;
    width: 50px;
    height: 50px;
    border: none;
}
#kkk{
    height: 100vh;
    overflow-y: scroll;
}

#page {
    height: 80vh;
    overflow-y: scroll;
      margin-top: 7vh;  
}

#bb {
    width: 100%;
    height: 7vh;
}

#zi {
    width: 100%;
    height: 5vh;
    background-color: #777777;
    text-align: center;
    line-height: 5vh;
    position: fixed;
    bottom: 8.2vh;
    left: 0;
}

#zi span {
    color: white;
    font-size: 12px;
}

#zi #yuan {
    color: greenyellow;
    font-size: 13px;
}

#tp {
    margin-right: 40vw;
}

#class {
    width: 100%;
    height: 6vh;
    border: solid 1px #dbdbdb;
    background-color: #EFEFEF;
}

#total {
    width: 100%;
    height: 8vh;
    /* border: solid 1px #dbdbdb; */
    display: flex;
    text-align: center;
    line-height: 8vh;
    position: fixed;
    bottom: 0;
    left: 0;
}

#ccc {
    width: 10vw;
    height: 8vh;
    background-color: #484848;
    color: white;
}

#ddd {
    width: 60vw;
    height: 8vh;
    background-color: #484848;
    color: white;
}

#eee {
    width: 30vw;
    height: 8vh;
    background-color: #FC4A00;
    color: white;
}

p {
    margin: 0;
}

.top {
    margin-top: 2vh;
}

#hh {
    display: flex;
    border: solid 1px #dbdbdb;
    border-top: none;
}

#bottom {
    width: 10vw;
    height: 15vh;
    /* border: solid 1px #dbdbdb; */
}

#four {
    width: 20vw;
    height: 15vh;
    /* border: solid 1px #dbdbdb; */
}

#five {
    width: 40vw;
    height: 15vh;
    margin-left: 3vw;
    /* border: solid 1px #dbdbdb; */
}

#six {
    width: 30vw;
    height: 15vh;
    /* border: solid 1px #dbdbdb; */
}

#name {
    margin-top: 2.2vh;
}

#price {
    margin-top: 2vh;
    margin-left: 14vw;
    color: red;
}

#num {
    margin-top: 5vh;
    margin-left: 2vw;
}

#box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    border: solid 1px gainsboro;
    position: fixed;
    background-color: white;
}

#one {
    cursor: pointer;
    font-size: 28px;
    margin-left: 3vw;
}

#two {
    font-size: 18px;
     margin-left: 6vw;
}

#three {
    cursor: pointer;
    font-size: 14px;
    margin-right: 2vw;
}

img {
    width: 20vw;
    height: 20vw;
    border: solid 1px #dbdbdb;
    margin-top: 2vh;
}

button {
    width: 7vw;
    height: 6vw;
    border: solid 1px #dbdbdb;
    text-align: center;
    border-radius: 2px;
}
</style>